import React, {Component} from 'react'
import {Text, View, FlatList, StyleSheet, RefreshControl, DeviceEventEmitter, StatusBar, Platform, AppState} from 'react-native';
import ScrollableTabView, { ScrollableTabBar } from 'react-native-scrollable-tab-view'
import ReadTab from '../component/ReadTab'
import { connect } from 'react-redux'
import {FLAG_LANGUAGE, LanguageDao} from '../../js/expand/dao/LanguageDao';
import CodePush from 'react-native-code-push' 
// const ScrollableTabView = require('react-native-scrollable-tab-view');
// const CustomTabBar = require('./CustomTabBar');
class Read extends Component {
  constructor(props) {
    super(props);
    this.languageDao = new LanguageDao(FLAG_LANGUAGE.flag_key);
    this.state = {
      list: []
    } 
  }

  componentDidMount() {
    DeviceEventEmitter.addListener('customKey', (e)=> {
      this.refresh();
    })
    this.refresh();
    CodePush.sync(
      {installMode: CodePush.InstallMode.IMMEDIATE, updateDialog: {
        appendReleaseDescription : true ,
        //更新描述的前缀。 默认为"Description"
        descriptionPrefix : "更新内容：" ,
        //强制更新按钮文字，默认为continue
        mandatoryContinueButtonLabel : "立即更新" ,
        //强制更新时的信息. 默认为"An update is available that must be installed."
        mandatoryUpdateMessage : "必须更新后才能使用" ,
        //非强制更新时，按钮文字,默认为"ignore"
        optionalIgnoreButtonLabel : '稍后' ,
        //非强制更新时，确认按钮文字. 默认为"Install"
        optionalInstallButtonLabel : '后台更新' ,
        //非强制更新时，检查到更新的消息文本
        optionalUpdateMessage : '有新版本了，是否更新？' ,
        //Alert窗口的标题
        title : '软件有新版本'
      }},
      this.codePushStatusDidChange.bind(this),
      // this.codePushDownloadDidProgress.bind(this)
    );
  }

  codePushStatusDidChange(syncStatus) {
    switch (syncStatus) {
        case CodePush.SyncStatus.CHECKING_FOR_UPDATE:
            this.setState({syncMessage: "Checking for update."});
            break;
        case CodePush.SyncStatus.DOWNLOADING_PACKAGE:
            this.setState({syncMessage: "Downloading package."});
            break;
        case CodePush.SyncStatus.AWAITING_USER_ACTION:
            this.setState({syncMessage: "Awaiting user action."});
            break;
        case CodePush.SyncStatus.INSTALLING_UPDATE:
            this.setState({syncMessage: "Installing update."});
            break;
        case CodePush.SyncStatus.UP_TO_DATE:
            this.setState({syncMessage: "App up to date.", progress: false});
            break;
        case CodePush.SyncStatus.UPDATE_IGNORED:
            this.setState({syncMessage: "Update cancelled by user.", progress: false});
            break;
        case CodePush.SyncStatus.UPDATE_INSTALLED:
            this.setState({syncMessage: "Update installed and will be applied on restart.", progress: false});
            break;
        case CodePush.SyncStatus.UNKNOWN_ERROR:
            this.setState({syncMessage: "An unknown error occurred.", progress: false});
            break;
    }
  }

  refresh() {
    let temp = this.languageDao.fetch().then(res => {
      this.setState({
        list: res
      })
    }).catch(err=> {
      console.log(err)
    });
  }

  render () {
    return (
      <View style={styles.container}>
        <StatusBar
          backgroundColor={this.props.themeColor} 
          barStyle="light-content"
        />
        <ScrollableTabView 
          tabBarBackgroundColor={this.props.themeColor}
          tabBarActiveTextColor="white"
          tabBarInactiveTextColor="mintcream"
          tabBarUnderlineStyle={{backgroundColor: '#e7e7e7', height: 2}}
          renderTabBar={() => <ScrollableTabBar/>}>
          {
            this.state.list.map((item,idx) => {
            if(item.checked) {
              return (
                <ReadTab {...this.props} themeColor={this.props.themeColor} key={idx} tabLabel={item.name} id={item.name}></ReadTab>
              )
            }
           
            })
          }
        </ScrollableTabView>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
   flex: 1
  },
  sectionHeader: {
    paddingTop: 2,
    paddingLeft: 10,
    paddingRight: 10,
    paddingBottom: 2,
    fontSize: 14,
    fontWeight: 'bold',
    backgroundColor: 'rgba(247,247,247,1.0)',
  },
  item: {
    padding: 10,
    backgroundColor: 'red',
    height: 40,
    fontSize: 18,
    height: 44,
    marginBottom: 10,
  },
})

const mapState = (state) => ({
  themeColor: state.theme.themeColor
})

export default connect(mapState, null)(Read)